<template>
  <div class="contrainer">
    <!-- 查询条件 -->
    <el-form
      size="small"
      ref="queryForm"
      label-width="68px"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="勋章名称">
        <el-input
          v-input-restrict
          v-model="sea_form.medalName"
          placeholder="请输入勋章名称"
          clearable
        />
      </el-form-item>
      <el-form-item class="search_btns">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getdataBysearch"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 搜索按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-preventReClick
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="addMedal"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <!-- 问卷列表 -->
    <el-table v-loading="loading" :data="medalList">
      <el-table-column show-overflow-tooltip label="效果图" align="center">
        <template slot-scope="scope">
          <img
            :src="scope.row.medalUrl"
            alt=""
            style="width: 50px; border-radius: 50%"
          />
          <div>{{ scope.row.medalName }}</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="勋章名称"
        align="center"
        prop="medalName"
      />
      <el-table-column
        label="简介"
        show-overflow-tooltip
        align="center"
        prop="content"
        width="320"
      />
      <el-table-column
        show-overflow-tooltip
        label="拥有人数"
        align="center"
        prop="num"
      />

      <el-table-column label="操作" align="center" width="240">
        <!-- // 0未发放 1已发放-->
        <template slot-scope="scope">
          <el-button
            icon="el-icon-view"
            size="mini"
            type="text"
            @click="preview(scope.row)"
            >详情</el-button
          >
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="updateByid(scope.row)"
            >编辑</el-button
          >
          <!-- 判断勋章状态显示发放或停止 0未发放 1已发放 -->
          <el-button
            size="mini"
            icon="el-icon-s-promotion"
            type="text"
            @click="sendByid(scope.row)"
            >发放</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="delByid(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="sea_form.pageNum"
      :limit.sync="sea_form.pageSize"
      @pagination="getList"
    />
    <!-- 新增编辑组件 -->
    <Updatemedal ref="updatemedal" @addSucess="successtips"></Updatemedal>
    <!-- 发放组件 -->
    <Sendmedal ref="sendmedal" @Sendsuccess="sendSuccess"></Sendmedal>
    <!-- 传递position与element一致 -->
    <!-- <Texttooltip :width="600" text="这是一个封装的组件，超出将省略，鼠标悬浮提示" position="top" >
    </Texttooltip> -->
  </div>
</template>

<script>
import Updatemedal from "./component/updateMedal.vue";
import Sendmedal from "./component/sendMedal.vue";
import Texttooltip from "../../components/Texttooltip.vue";
import {
  getMedalList,
  deleteMedal,
  getmedalstaffList,
} from "../../api/medal/medal";
export default {
  name: "ZyAdminIndex",

  data() {
    return {
      showSearch: true,
      loading: false,
      // 总条数
      total: 3,
      // 搜索条件
      sea_form: {
        pageNum: 1,
        pageSize: 10,
        medalName: "",
      },
      medalList: [],
      // 新增组件
      show: false,
      grant_Open: true,
    };
  },
  created() {
    // 获取问卷数据
    this.getList();
  },
  mounted() {},
  components: { Updatemedal, Sendmedal, Texttooltip },
  methods: {
    // 搜索
    getdataBysearch() {
      this.sea_form.pageNum = 1;
      // 发送获取信息请求
      this.getList();
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        pageNum: 1,
        pageSize: 10,
        medalName: "",
      };
      this.getdataBysearch();
    },
    // 获取勋章数据
    async getList() {
      this.loading = true;
      // 发送获取数据请求
      let res = await getMedalList(
        this.sea_form.pageNum,
        this.sea_form.pageSize,
        this.sea_form.medalName,
        ""
      );
      const { code, rows, total } = res;
      if (code == 200) {
        this.loading = false;
        this.medalList = rows;
        this.total = total;
      } else {
        this.loading = false;
      }
      // this.medalList = [
      //   {
      //     medalImg: "https://pic.imgdb.cn/item/64db4a4c1ddac507cc92feb8.png",
      //     medalName: "勋章1",
      //     id: 1,
      //     medalText:
      //       "这是一个勋章这是一个勋章这是一个勋章这是一个勋章这是一个勋章",
      //     medalGetNum: 22,
      //     status: 1,
      //   },
      //   {
      //     medalImg: "https://pic.imgdb.cn/item/64db4a4c1ddac507cc92feb8.png",
      //     medalName: "勋章2",
      //     id: 1,
      //     medalText: "这也是一个勋章这也是一个勋章这也是一个勋章这也是一个勋章",
      //     medalGetNum: 0,
      //     status: 0,
      //   },
      // ];
    },
    // 详情
    preview(row) {
      this.$router.push({
        path: "/medal/detail",
        query: {
          medalId: row.medalId,
          medalName: row.medalName,
          medalUrl: row.medalUrl,
          num: row.num,
          content: row.content,
        },
      });
    },
    // 新增
    addMedal() {
      this.$refs.updatemedal.show();
    },
    // 编辑
    updateByid(row) {
      this.$refs.updatemedal.show(row);
    },
    // 新增编辑成功
    successtips(n) {
      if (n == 1) {
        this.$modal.msgSuccess("添加成功");
      } else {
        this.$modal.msgSuccess("编辑成功");
      }
      this.getList();
    },
    // 删除
    delByid(row) {
      this.$confirm(
        `确认删除【${row.medalName}】吗？此操作不可恢复`,
        "删除确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let res = await deleteMedal(row.medalId);
          if (res.code == 200) {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          }
        })
        .catch(() => {});
    },
    // 发放
    async sendByid(row) {
      this.$refs.sendmedal.show(row);
    },
    sendSuccess() {
      this.$modal.msgSuccess("发放成功");
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.contrainer {
  padding: 20px;
}
.search_bar {
  padding: 20px 20px 0px 20px;
  background-color: #fafafa;
  margin: 20px 0px;
  .search_btns {
    float: right;
  }
}
</style>